<!--  -->
<template>
  <div class="dangyuanzhanbi">
    <div class="bingtu2" ref="bingtu2"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        title: {
          text: "党员发展",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: [],
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "60%",
            center: ["60%", "65%"],
            data: [],

            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              normal: {
                color: function (params) {
                  //自定义颜色
                  var colorList = [
                    "#37a2d8",
                    "#fda07e",
                    "#fedb5b",
                    "#64e1e3",
                    "#e161ae",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      },
    };
  },

  methods: {
    bingtu2() {
      var myChart = this.$echarts.init(this.$refs.bingtu2);
      myChart.setOption(this.option);
    },
    huoqushuju() {
      this.$axios
        .post("/fristpage/getAllQuMembertatus")
        .then((response) => {
          response.data.data.status.forEach((item, index) => {
            switch (item) {
              case "0":
                this.option.legend.data.push("群众");
                this.option.series[0].data.push({
                  name: "群众",
                  value: response.data.data.counts[index],
                });
                break;
              case "1":
                this.option.legend.data.push("团员");
                this.option.series[0].data.push({
                  name: "团员",
                  value: response.data.data.counts[index],
                });
                break;
              case "2":
                this.option.legend.data.push("积极分子");
                this.option.series[0].data.push({
                  name: "积极分子",
                  value: response.data.data.counts[index],
                });
                break;
              case "3":
                this.option.legend.data.push("发展对象");
                this.option.series[0].data.push({
                  name: "发展对象",
                  value: response.data.data.counts[index],
                });
                break;
              case "4":
                this.option.legend.data.push("预备党员");
                this.option.series[0].data.push({
                  name: "预备党员",
                  value: response.data.data.counts[index],
                });
                break;
              case "5":
                this.option.legend.data.push("正式党员");
                this.option.series[0].data.push({
                  name: "正式党员",
                  value: response.data.data.counts[index],
                });
                break;
            }
          });
          this.bingtu2();
        })
        .catch((error) => {
          console.error();
        });
    },
  },

  mounted() {
    this.huoqushuju();
  },
};
</script>
<style lang='less' scoped>
.dangyuanzhanbi {
  height: 100%;
  padding: 15px;
}

.bingtu2 {
  height: 75%;
  padding: 0px;
}
</style>